import React from 'react'
import ReactDOM from 'react-dom/client'

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import createElement ,{render} from './jsxHandle';

const root = ReactDOM.createRoot(document.getElementById('root'))

let x =20
let y =10

// root.render(
//   <>
//     <h2 className='title' style={{color:'red'}}>react系统学习</h2>
//     <div className='box'>
//         <span>{x}</span>
//         <span>{y}</span>
//     </div>
//     {React.createElement('button',null,'提交')}
//   </>
// )

// 生成的虚拟dom
// console.log(
//  _jsxs(_Fragment, {
//   children: [_jsx("h2", {
//     className: "title",
//     style: {
//       color: 'red'
//     },
//     children: "react\u7CFB\u7EDF\u5B66\u4E60"
//   }), _jsxs("div", {
//     className: "box",
//     children: [_jsx("span", {
//       children: x
//     }), _jsx("span", {
//       children: y
//     })]
//   })]
// })
// );

// 自己写的方法生成虚拟dom
console.log("ok",
  createElement('h1',{className:'title'},createElement('span',{className:'txt'},"react系统学习"))
);

let jsxObj = createElement('h1',{className:'title'},x,createElement('span',{className:'txt',style:{color:'red'}},"react系统学习"))
// 自己写的方法将虚拟dom生成真实dom
render(jsxObj,document.getElementById('root'))



